iOS 15 透明导航栏设置

在iOS 13 UINavigationBar新增了scrollEdgeAppearance属性,但在iOS 14及更早的版本中此属性只应用在大标题导航栏上。在iOS 15中此属性适用于所有导航栏。
对于scrollEdgeAppearance属性的说明:

When a navigation controller contains a navigation bar and a scroll view, part of the scroll view’s content appears underneath the navigation bar. If the edge of the scrolled content reaches that bar, UIKit applies the appearance settings in this property.
If the value of this property is nil, UIKit uses the settings found in the standard Appearance property, modified to use a transparent background. If no navigation controller manages your navigation bar, UIKit ignores this property and uses the standard appearance of the navigation bar.

scrollEdgeAppearanceUINavigationBarAppearance类型,有下面几个属性:

backgroundEffect:

基于backgroundColorbackgroundImage的磨砂效果

backgroundColor:

背景色,在backgroundImage之下

backgroundImage:

背景图片

backgroundImageContentMode:

渲染backgroundImage时使用的内容模式。 默认为UIViewContentModeScaleToFill

shadowColor:

阴影颜色(底部分割线),当shadowImagenil时,直接使用此颜色为阴影色。如果此属性为nilclearColor(需要显式设置),则不显示阴影。

如果shadowImage包含 template 图像,则使用该图像作为阴影并使用此属性中的值对其进行着色。如果此属性为nilclearColor(需要显式设置),则不显示阴影。
但是,如果shadowImage不包含 template 图像,则此属性无效。

shadowImage:

阴影图片。
template图像: [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]

示例代码:

  • 不透明导航栏:

    //navigation标题文字颜色
    NSDictionary *dic = @{NSForegroundColorAttributeName : [UIColor blackColor],
                          NSFontAttributeName : [UIFont systemFontOfSize:18 weight:UIFontWeightMedium]};
    if (@available(iOS 15.0, *)) {
        UINavigationBarAppearance *barApp = [UINavigationBarAppearance new];
        barApp.backgroundColor = [UIColor whiteColor];
        barApp.shadowColor = [UIColor whiteColor];
        barApp.titleTextAttributes = dic;
        self.navigationController.navigationBar.scrollEdgeAppearance = barApp;
        self.navigationController.navigationBar.standardAppearance = barApp;
    }else{
        //背景色
        self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
        self.navigationController.navigationBar.titleTextAttributes = dic;
        [self.navigationBar setShadowImage:[UIImage new]];
        [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    }
    //不透明
    self.navigationController.navigationBar.translucent = NO;
    //navigation控件颜色
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
  • 透明导航栏:

因为scrollEdgeAppearance = nil,当前如果有ScrollView,当ScrollView向上滚动时scrollEdgeAppearance会默认使用standardAppearance。因此backgroundEffectshadowColor也要显式设置为nil,防止backgroundEffectshadowColor出现变成有颜色的。 (更新Xcode13.4.1后和之前似乎不一样)

    //navigation标题文字颜色
    NSDictionary *dic = @{NSForegroundColorAttributeName : [UIColor whiteColor],
                          NSFontAttributeName : [UIFont systemFontOfSize:18]};
    if (@available(iOS 15.0, *)) {
        UINavigationBarAppearance *barApp = [UINavigationBarAppearance new];
        barApp.backgroundColor = [UIColor clearColor];
        barApp.titleTextAttributes = dic;   
        barApp.backgroundEffect = nil;
        barApp.shadowColor = nil;
        self.navigationController.navigationBar.scrollEdgeAppearance = barApp;
        self.navigationController.navigationBar.standardAppearance = barApp;
    }else{
        self.navigationController.navigationBar.titleTextAttributes = dic;
        [self.navigationBar setShadowImage:[UIImage new]];
        [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    }
    //透明
    self.navigationController.navigationBar.translucent = YES;
    //navigation控件颜色
    self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
  • 透明导航栏时动态修改颜色:

-(Void)setNavigationBarBackgroundColor:(UIColor *)color {
        if (@available(iOS 15.0, *)) {
            self.navigationController.navigationBar.standardAppearance.backgroundColor = color
            self.navigationController.navigationBar.scrollEdgeAppearance.backgroundColor = color
        }else{
            self.navigationController.navigationBar.barTintColor = color
        }
    }

2024年04月12日

push 时设置 backgroundColor = .clear没有过渡动画,可以改变颜色透明度alpha来实现。比如可以写成backgroundColor = UIColor(white: 1, alpha: 0)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据